<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam"
              @on-search ="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :toolbar="toolbar"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>

  </page-layout>
</template>

<script>

import { message , modal} from 'ant-design-vue';

import { page, remove } from '@/api/module/course-code-manage'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { reactive, createVNode, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import dictEnum from '@/const/dict'
import { getDictByCodesReturnObj } from '@/tools/get-dict'
import moment from 'moment';

const removeKey = "remove";

export default {
  setup() {

    const tableRef = ref()

    const router = useRouter()

    const columns = [
      {
        title: '学校',
        dataIndex: 'schName',
        width: '100',
        key: 'schName'
      },
      {
        title: '学科类别',
        dataIndex: 'disciplineId',
        width: '100',

      },
      {
        title: '课程代码',
        dataIndex: 'courseCode',
        width: '100',

      },
      {
        title: '课程名称',
        dataIndex: 'courseName',
        width: '100',
      },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await page(param);
      return {
        data: response.data.record,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: '您是否确定要删除此数据?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          remove({ id: record.id }).then((response) => {
            if(response.success){
              message.success({content: "删除成功", key: removeKey, duration: 1}).then(()=>{
                tableRef.value.reload()
              })
            }else{
              message.error({content: "删除失败", key: removeKey, duration: 1})
            }
          })
        }
      });
    }

    /// 行操作
    const operate = [
      { label: "编辑", event: function ({ id }) { router.push({
        path: '/university/course-code-manage/add',
        query: { id: id}
      }) }},
      { label: "删除", event: function (record) { removeMethod(record) }},
    ];

    const toolbar = [
      {code: '', label: '新增', type: 'primary', event: (selectedRowKeys) => {
        handleAdd()
      }},
      {code: '', label: '批量导入', type: '', event: (selectedRowKeys) => {
        handleExport()
      }},
    ]

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    })
    let dictLists = reactive({
      data: {
        sub: []
      }
    })

    const searchParam = [
      { key: "schName", type: "input", label: "学校", placeholder: '输入姓名'},
      { key: "disciplineId", type: "select", label: "学科类别", options: dictLists.data.sub, placeholder: '输选择'},
      { key: "courseCode", type: "input", label: "课程代码", placeholder: '输入课程代码'},
      { key: "courseName", type: "input", label: "课程名称", placeholder: '输入课程名称'},
    ]

    const search = function(value) {
      state.param = {
        taName: value.taName,
        taMajor: value.taMajor,
        schName: value.schName,
        statCreateTime: value.createTime?value.createTime[0]:'',
        endCreateTime: value.createTime?value.createTime[1]:'',
        createBy: value.createBy,
      }
    }
    const onReset = function() {
      state.param = {
        taName: '',
        taMajor: '',
        schName: '',
        statCreateTime: '',
        endCreateTime: '',
        createBy: '',
      }
    }

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeSave = function() {
      state.visibleSave = false
      tableRef.value.reload()
    }

    const closeEdit = function() {
      state.visibleEdit = false
      tableRef.value.reload()
    }

    const closeInfo = function() {
      state.visibleInfo = false
    }

    const handleAdd = () => router.push('/university/course-code-manage/add')
    const handleExport = () => {}

    onMounted(async () => { })
    return {
      state,
      fetch,
      search,
      onReset,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,

      closeSave,
      closeEdit,
      closeInfo,

      handleAdd,
      tableRef,
      toolbar,
      handleExport
    };
  },
};
</script>
